<template>
  <canvas id="progressViewCanvas"></canvas>
</template>
<script>
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../../assets/js/flexible.js";
export default {
  props: {
    percentPro: {
      default: 80,
      type: Number,
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
  },
  data() {
    return { canvas: null, percent: 0, deviceType: 1, darkMode: "light" };
  },
  mounted() {
    this.deviceType = screenType;
    this.darkMode = this.darkModePro;
    this.percent = this.percentPro;
    this.doDraw(this.deviceType);
  },
  watch: {
    deviceTypePro(newValue) {
      this.deviceType = newValue;
      this.doDraw(this.deviceType);
    },
    darkModePro(newValue) {
      this.darkMode = newValue;
      this.doDraw(this.deviceType);
    },
    percentPro(newValue) {
      this.percent = newValue;
      this.doDraw(this.deviceType);
    },
  },
  computed: {},
  methods: {
    doDraw(deviceType) {
      this.canvas = document.getElementById("progressViewCanvas");

      //设置默认值
      var standardWidth = 24;
      let devicePixelRatio = 1;
      var flexWidth = (WIDTH_PHONE / WIDTH_STANDARD) * 252; //圆环的宽度
      var flexHeight = flexWidth; //圆环的高度
      var flexRadius = flexWidth / 2; //圆环的半径
      var flexLineWidth = (WIDTH_PHONE / WIDTH_STANDARD) * standardWidth; //圆环的线宽
      var flexInnerRadius = flexRadius - flexLineWidth; //圆环的内径

      if (window.devicePixelRatio) {
        devicePixelRatio = window.devicePixelRatio;
        switch (deviceType) {
          case 101: //iPhone
            flexWidth = screenSize(252);
            break;
          case 102: //iPad
            flexWidth = screenSize(
              Math.min(flexibleHeight / 2, flexibleWidth) * 0.8 - 64
            );
            break;
          case 1: //android手机
            flexWidth = screenSize(252);
            break;
          case 2: //android Pad竖屏
            flexWidth = screenSize(
              Math.min(flexibleHeight / 2, flexibleWidth) * 0.8 - 64
            );
            break;
          case 3: //android Pad横屏
            flexWidth = screenSize(252);
            break;
          case 4: //android 折叠屏
            flexWidth = screenSize(
              Math.min(flexibleHeight / 2, flexibleWidth) * 0.8 - 48
            );
            break;
          default:
            flexWidth = screenSize(252);
        }

        flexHeight = flexWidth;
        this.canvas.style.width = flexWidth + "px";
        this.canvas.style.height = flexHeight + "px";
        this.canvas.height = flexHeight * devicePixelRatio;
        this.canvas.width = flexWidth * devicePixelRatio;
        // this.canvas.style.borderRadius = 0.5;
        this.canvas.style.overflow = "hidden";

        flexRadius = (flexWidth / 2) * devicePixelRatio;
        switch (deviceType) {
          case 101: //iPhone
            flexLineWidth = screenSize(24) * devicePixelRatio;
            break;
          case 102: //iPad
            flexLineWidth = screenSize(32) * devicePixelRatio;
            break;
          case 1: //android手机
            flexLineWidth = screenSize(24) * devicePixelRatio;
            break;
          case 2: //android Pad竖屏
            flexLineWidth = screenSize(32) * devicePixelRatio;
            break;
          case 3: //android Pad横屏
            flexLineWidth = screenSize(24) * devicePixelRatio;
            break;
          case 4: //android 折叠屏
            flexLineWidth = screenSize(24) * devicePixelRatio;
            break;
          default:
            flexLineWidth = screenSize(24) * devicePixelRatio;
        }

        flexInnerRadius = flexRadius - flexLineWidth / 2;
      }

      const ctx = this.canvas.getContext("2d", { antialias: true });
      ctx.antialias = "standard";

      var startAngle = 154.0;
      var endAngle = 386.0;
      // 先画圆弧背景
      ctx.beginPath();
      ctx.strokeStyle =
        this.darkMode === "light"
          ? "rgba(0,0,0,0.03)"
          : "rgba(255,255,255,0.1)";
      // this.darkMode === "light" ? "#DCDEE0" : "rgba(255,255,255,0.1)";
      ctx.lineWidth = flexLineWidth;
      ctx.lineCap = "round";
      ctx.arc(
        flexRadius,
        flexRadius,
        flexInnerRadius,
        (startAngle / 360) * 2 * Math.PI,
        (endAngle / 360) * 2 * Math.PI
      );
      ctx.stroke();

      // 再画进度
      ctx.beginPath();
      const gradient = ctx.createLinearGradient(25, 188, 135, 0);
      if (this.percent > 30) {
        gradient.addColorStop(0, "#86C1FF");
        gradient.addColorStop(1, "#254FF7");
      } else if (this.percent > 0) {
        gradient.addColorStop(0, "#F57643");
        gradient.addColorStop(1, "#E84026");
      } else {
        gradient.addColorStop(0, "rgba(0,0,0,0)");
        gradient.addColorStop(1, "rgba(0,0,0,0)");
      }
      let target =
        startAngle + ((endAngle - startAngle) * this.percent) / 100.0;
      //添加渐变颜色
      ctx.strokeStyle = gradient;
      if (isIOS()) {
        ctx.arc(
          flexRadius + 1,
          flexRadius + 1,
          flexInnerRadius + 1,
          (startAngle / 360) * 2 * Math.PI,
          (target / 360) * 2 * Math.PI
        );
      } else {
        ctx.arc(
          flexRadius,
          flexRadius,
          flexInnerRadius,
          (startAngle / 360) * 2 * Math.PI,
          (target / 360) * 2 * Math.PI
        );
      }

      ctx.stroke();

      // 核心代码
      // ctx.scale(devicePixelRatio, devicePixelRatio);
    },
  },
};
</script>
<style scoped>
.ringProgressViewContainer {
  width: 100%;
  height: 252px;
  /* background: #ff0000; */
}
</style>
